<template>
  <div>{{ name }}</div>
  <button @click="changeName">change name</button>
  <div>
    <span>info: </span>
    <div>
      <span>{{ obj.name }} - {{ obj.gender }} - {{ obj.age }}</span>
      <button @click="changeObj">change info</button>
    </div>
  </div>
  <div>
    <span>info_reactive: </span>
    <div>{{ rObj.name }} - {{ rObj.age }} - {{ rObj.gender }}</div>
    <button @click="changeRObj">change info_reactive</button>
  </div>
</template>

<script>
// import { defineComponent } from "@vue/composition-api";
import { ref, reactive } from "vue";

export default {
  setup(props, context) {
    let name = ref("mal");
    const obj = ref({
      name: "mal",
      gender: "male",
      age: "18",
    });
    const rObj = reactive({
      name: "r_mal",
      gender: "r_male",
      age: "r_18",
    });

    function changeName() {
      name.value = "马林";
    }

    function changeObj() {
      console.log(111, "change");
      obj.value.name = "马林";
      obj.value.gender = "male - change";
      obj.value.age = "18 - change";
    }

    function changeRObj() {
      rObj.name = "马林";
      rObj.age = "19";
      rObj.gender = "男";
    }

    return {
      name,
      obj,
      rObj,
      changeName,
      changeObj,
      changeRObj,
    };
  },
};
</script>
